<!-- eslint-disable camelcase -->
<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import router from '../../router/router'
import storage from '../../utils/storage'
// const { proxy } = getCurrentInstance()
const store = useStore()
const username = ref(store.state.teacherStore.teacherInfo.data.data.username)
// const userid = ref(store.state.useStore.userInfo.data.data.id)

onMounted(() => {
  getUserInfo()
})

const getUserInfo = () => {

}

const index = () => {
  router.push('/index')
}

const exit = () => {
  router.push('/')
  storage.clearAll()
}

const goto1_1 = () => {
  router.push('/examDescription')
}

const goto1_2 = () => {
  router.push('/selectExam')
}

const goto1_3 = () => {
  router.push('/addExam')
}

const goto2_1 = () => {
  router.push('/answerDescription')
}

const goto2_2 = () => {
  router.push('/selectAnswer')
}

const goto2_3 = () => {
  router.push('/addAnswer')
}

const goto3_1 = () => {
  router.push('/allStudentsGrade')
}

const goto3_2 = () => {
  router.push('/selectExamToPart')
}

const goto4_1 = () => {
  router.push('/studentManage')
}

const goto4_2 = () => {
  router.push('/addStudent')
}

// const openMsg = () => {
//   alert('根据《国务院办公厅关于2019年部分节假日安排的通知》精神，越城区行政服务中心将于4月5日（星期五）至4月7日（星期天）进行清明节放假调休，共3天，放假期间不受理业务。4月8日（星期一）开始正常上班受理业务。望市民朋友相互转告，给您带来不便，敬请谅解。', '清明节放假通知', {
//     confirmButtonText: '确定'
//   })
// }
</script>

<template>
<el-container class="home_container">
  <el-header id="topbar">
    <el-row>
      <el-col :span="4" class="topbar-left">
        <i class="iconfont icon-kaoshi"></i>
        <span class="title" @click="index()">EXAM-SYSTEM</span>
      </el-col>
      <el-col :span="20" class="topbar-right">
        <i class="el-icon-menu" @click="toggle()"></i>
        <div class="user">
          <span>{{username}}</span>
          <img src="../../assets/img/userimg.png" class="user-img" ref="img" @click="showSetting()" />
         <li class="right">
    <el-dropdown>
    <span class="el-dropdown-link">
      <div class="box"> <a href="javacript:;">{{username}}</a></div>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item> <p @click="manage()">管理中心</p></el-dropdown-item>
        <el-dropdown-item><p class="exit" @click="exit()">退出</p></el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </li>
        </div>
      </el-col>
    </el-row>
  </el-header>

  <el-container>
    <el-aside width="200px" class="left">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="#94b6e3"
        >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><document></document></el-icon>
        <span>考试管理</span>
      </template>
      <el-menu-item-group >
            <el-menu-item index="1-1" @click="goto1_1"> 功能管理</el-menu-item>
            <el-menu-item index="1-2" @click="goto1_2">考试查询</el-menu-item>
            <el-menu-item index="1-3" @click="goto1_3">添加考试</el-menu-item>
          </el-menu-item-group>
    </el-sub-menu>

     <el-sub-menu index="2">
      <template #title>
        <el-icon><document></document></el-icon>
        <span>题库管理</span>
      </template>
      <el-menu-item-group >
            <el-menu-item index="2-1" @click="goto2_1"> 功能介绍</el-menu-item>
            <el-menu-item index="2-2" @click="goto2_2">所有题库</el-menu-item>
            <el-menu-item index="2-3" @click="goto2_3">增加题库</el-menu-item>
          </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><document></document></el-icon>
        <span>成绩查询</span>
      </template>
      <el-menu-item-group >
            <el-menu-item index="3-1" @click="goto3_1"> 学生成绩查询</el-menu-item>
            <el-menu-item index="3-2" @click="goto3_2">成绩分段查询</el-menu-item>
          </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>
        <el-icon><document></document></el-icon>
        <span>学生管理</span>
      </template>
      <el-menu-item-group >
            <el-menu-item index="4-1" @click="goto4_1"> 学生管理</el-menu-item>
            <el-menu-item index="4-2" @click="goto4_2">添加学生</el-menu-item>
          </el-menu-item-group>
    </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-main>
      <el-main>

        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{path: '/index'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item ></el-breadcrumb-item>
        </el-breadcrumb>
                <!-- <section class="index" v-show="proxy.$router.currentRoute.value.name === 'teacherHome'">
    <div class="hello">
      <i class="iconfont icon-xihuan"></i><span>很高兴遇见你,{{username}}老师。</span>
    </div>
    <div class="msg">
      <p class="title">教务公告：</p>
      <ul>
        <li @click="openMsg()"><i class="iconfont icon-flag"></i>清明节放假通知</li>
        <li @click="openMsg()"><i class="iconfont icon-flag"></i>下周例行工作报告会</li>
        <li @click="openMsg()"><i class="iconfont icon-flag"></i>关于毕业生答辩具体流程</li>
      </ul>
    </div>
  </section> -->
  <div class="box"></div>
        <router-view></router-view>

      </el-main>

    </el-main>
  </el-container>
</el-container>
</template>

<style lang="less" scoped>

.box{
  padding-bottom: 10px;
  border-top: solid 2px rgb(16, 191, 203);
}
.index {
  margin-left: 70px;
  .hello {
    font-size: 20px;
    color: #726f70;
    .icon-xihuan {
      font-size: 30px;
      color: #dd6572;
    }
  }
  .msg {
    .title {
      font-size: 16px;
      color: #000;
      margin-top: 20px;
      margin-left: 10px;
    }
    ul {
      display: flex;
      flex-direction: column;
      width: 200px;
      overflow: hidden;
    }
    li {
      margin-top: 10px;
      font-size: 14px;
      color: lightcoral;
      cursor: pointer;
      display: inline-block;
    }
  }
}
.home_container{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%
}
.box{
  margin-top: 25px;
  font-size: 16px;
}
.right .icon {
  margin-right: 6px;

}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
#topbar {
  position: relative;
  z-index: 10;
  background-color: #124280;
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

#topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.topbar-left .icon-kaoshi {
  font-size: 60px;
}
.topbar-left .title {
  font-size: 20px;
  cursor: pointer;
}
.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}
.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}
.topbar-right .user .user-img {
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
}
.user .out {
  font-size: 14px;
  position: absolute;
  top: 80px;
  right: 0px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 12px;
}
.user .out ul {
  list-style: none;
}
.user .out ul > li {
  height: 26px;
  line-height: 26px;
}
.out a {
  text-decoration: none;
  color: #000;
}
.out .exit {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}
.left{
  background-color: #94b6e3;
}
</style>
